<template>
  <!-- 带权限按钮 -->
  <el-button
      v-if="hasPerms(perms)"
      :size="size"
      :type="type"
      :plain="plain"
      :loading="loading"
      :icon="icon"
      @click="handleClick">
    {{ label }}
  </el-button>
</template>

<script lang="ts">

</script>

<script setup lang="ts">
import { PropType, ref} from "vue";
import useMenuStore from "@/store/menu";
import {Menu} from "@/interface/menu";
import {Sizes, Types} from "@/interface/enum";

const menuStore = useMenuStore()

const props = defineProps({
  type: {//按钮类型
    type: String as PropType<Types>,
    default: Types.primary,
  },
  size: {//按钮尺寸
    type: String as PropType<Sizes>,
    default: '',
  },
  plain: {  // 是否为朴素按钮
    type: Boolean,
    default: false
  },
  loading: {  // 按钮加载标识
    type: Boolean,
    default: false
  },
  disabled: {  // 按钮是否禁用
    type: Boolean,
    default: false
  },
  perms: {  // 按钮权限标识，外部使用者传入
    type: String,
    default: null
  }
})

const label = ref<string>('') //按钮显示文本
const icon = ref<string>('')
const emit = defineEmits(['action'])
const handleClick = () => {
  console.log('子组件向父组件传递消息')
  emit('action')
}

const hasPerms = (perms:string) => {
  let res = menuStore.buttons.filter((b)=>b.perms === perms)
  if(res.length < 1){
    return false
  }else{
    let btn = res.pop() as Menu
    icon.value = btn.icon
    label.value = btn.name
    return true
  }
}


</script>

<style scoped lang="less">

</style>